<template>
  <div
    class="ac-local-img"
    :style="{width: width + 'px', height: height + 'px'}"
  >
    <img :src="imgPath" alt />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  img: String,
  width: {
    type: Number,
    default: 100
  },
  height: {
    type: Number,
    default: 100
  }
});
const imgPath = ref('');

onMounted(async() => {
  const imgPaths = props.img.split('.');
  if (imgPaths[1] === 'svg') {
    imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.svg`)).default;
  } else if (imgPaths[1] === 'png') {
    imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.png`)).default;
  } else if (imgPaths[1] === 'webp') {
    imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.webp`)).default;
  }
});
</script>

<style scoped>
.ac-local-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>